<template>
  <div class="medical-background">
    <!-- 标题 -->
    <div class="header">
      <!-- 左侧竖条 -->
      <div class="header__bar"></div>
      <!-- 标题文字 -->
      <span class="header__text">医疗背景</span>
    </div>

    <!-- 横线装饰 -->
    <div class="divider">
      <!-- 高亮渐变条 -->
      <div class="divider__highlight"></div>
    </div>

    <!-- 主体内容 -->
    <div class="content">
      <div class="tables">
        <!-- 医疗&健康表格 -->
        <table class="table">
          <tbody>
            <tr v-for="(item, index) in data" :key="index" class="table__row">
              <td class="table__question">{{ item.question }}</td>
              <td class="table__cell">
                <span class="table__label">是</span>
                <input
                  disabled
                  type="radio"
                  class="table__radio"
                  :name="'radio-' + index"
                  :checked="item.value"
                />
              </td>
              <td class="table__cell">
                <span class="table__label">否</span>
                <input
                  disabled
                  type="radio"
                  class="table__radio"
                  :name="'radio-' + index"
                  :checked="!item.value"
                />
              </td>
            </tr>
          </tbody>
        </table>

        <!-- 生活方式&个人史表格 -->
        <table class="table">
          <tbody>
            <tr
              v-for="(item, index) in lifestyleData"
              :key="index"
              class="table__row"
            >
              <td class="table__question table__question--narrow">
                {{ item.question }}
              </td>
              <td class="table__cell">
                <div
                  class="table__checkbox"
                  :class="{ 'table__checkbox--checked': item.value }"
                ></div>
              </td>
              <td class="table__label table__label--yes">是</td>
              <td class="table__cell">
                <div
                  class="table__checkbox"
                  :class="{ 'table__checkbox--checked': !item.value }"
                ></div>
              </td>
              <td
                class="table__label"
                :class="
                  item.value ? 'table__label--active' : 'table__label--no'
                "
              >
                否
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from "@/store/modules/user";
import { defineProps, onMounted, ref } from "vue";
import { healthinfo } from "@/api/business/egg";

const userStore = useUserStore();
const userId = ref();
const medicalInfo = ref({});

const data = ref([]);
const lifestyleData = ref([]);

const userList = ref([]);
const loading = ref(true);

/** 查询用户列表 */
function getList() {
  loading.value = true;
  healthinfo({ userId: userId.value }).then((res) => {
    loading.value = false;
    medicalInfo.value = res.data;

    const toBool = (v) =>
      v === "1" ||
      v === 1 ||
      v === true ||
      v === "yes" ||
      v === "是" ||
      v === "Y" ||
      v === "problem";

    // 医疗 & 健康
    data.value = [
      {
        question: "是否有过重大疾病?",
        value: toBool(medicalInfo.value?.majorIllness),
      },
      {
        question: "是否有过住院手术?",
        value: toBool(medicalInfo.value?.everHadSurgeryOrHospitalized),
      },
      {
        question: "是否有慢性病?",
        value: toBool(medicalInfo.value?.chronicConditions),
      },
      {
        question: "是否有性疾病?",
        value: medicalInfo.value?.everHadSti === "Y",
      },
      {
        question: "是否有精神方面问题?",
        value: toBool(medicalInfo.value?.psychiatricCare),
      },
      {
        question: "是否有过近视矫正手术?",
        value: toBool(medicalInfo.value?.laserSurgery),
      },
    ];

    // 生活方式 & 个人史
    lifestyleData.value = [
      {
        question: "是否有牙齿问题？或戴过牙套？",
        value: toBool(medicalInfo.value?.dentalProblems),
      },
      {
        question: "是否有听力问题？",
        value: toBool(medicalInfo.value?.hearingProblems),
      },
      {
        question: "是否吸烟？",
        value: toBool(medicalInfo.value?.smoking),
      },
      {
        question: "是否喝酒？",
        value: toBool(medicalInfo.value?.drinking),
      },
      {
        question: "是否吸毒？",
        value: toBool(medicalInfo.value?.drugUse),
      },
      {
        question: "是否有过过敏史?",
        value: medicalInfo.value?.drugUse === "Y",
      },
    ];
  });
}

const props = defineProps({
  userId: {
    type: String,
    required: true,
    default: "",
  },
});

onMounted(() => {
  userId.value = props.userId;
  getList();
});
</script>

<style scoped lang="scss">
/* 默认字体与颜色 */
$font-default: "Microsoft YaHei", "微软雅黑", sans-serif;
$color-default: #333;

/* 禁用单选框样式穿透 */
::v-deep .disabled-input:disabled {
  background-color: red !important;
  color: #999;
  cursor: not-allowed;
  font-family: $font-default;
}

/* 最外层容器 */
.medical-background {
  width: 100%;
  font-family: $font-default;
  color: $color-default;
}

/* 标题区域 */
.header {
  margin-top: 20px;
  display: flex;
  align-items: center;
  font-family: $font-default;
  color: $color-default;

  /* 左侧竖条 */
  &__bar {
    width: 6px;
    height: 26px;
    background-color: #2b5cab;
  }

  /* 标题文字 */
  &__text {
    margin-left: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #2b5cab;
    font-family: $font-default;
  }
}

/* 横线装饰 */
.divider {
  height: 1px;
  background-color: #2b5cab;
  margin-top: 18px;
  position: relative;
  font-family: $font-default;
  color: $color-default;

  /* 高亮渐变条 */
  &__highlight {
    width: 460px;
    height: 5px;
    background: linear-gradient(to right, #2b5cab, #cedbf0);
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* 主体内容 */
.content {
  border: 1px solid #a2c4e8;
  border-radius: 8px;
  margin-top: 23px;
  padding: 20px 20px;
  font-family: $font-default;
  color: $color-default;
}

/* 双列表格容器 */
.tables {
  display: flex;
  gap: 40px;
  font-family: $font-default;
  color: $color-default;
}

/* 表格公共样式 */
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: $font-default;
  color: $color-default;

  /* 行样式 */
  &__row {
    border-bottom: 1px solid #e5e7eb;
    height: 2em;
  }

  /* 问题单元格 */
  &__question {
    padding: 16px 0;
    text-align: left;
    vertical-align: middle;
    font-family: $font-default;
    color: $color-default;

    /* 窄列模式 */
    &--narrow {
      width: 152px;
    }
  }

  /* 单元格公共样式 */
  &__cell {
    text-align: center;
    vertical-align: middle;
    font-family: $font-default;
    color: $color-default;
  }

  /* 标签文字 */
  &__label {
    margin-right: 8px;
    font-size: 14px;
    font-family: $font-default;
    color: $color-default;

    /* 是标签 */
    &--yes {
      width: 20px;
      color: #4d4d4d;
    }

    /* 否标签 */
    &--no {
      color: #4d4d4d;
      width: 16px;
    }

    /* 高亮否标签 */
    &--active {
      color: #2b5cab;
    }
  }

  /* 单选框样式 */
  &__radio {
    width: 20px;
    height: 20px;
    margin-left: 8px;
    border: 2px solid #d1d5db; // ← 新增边框
  }

  /* 自定义复选框 */
  &__checkbox {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    border: 2px solid #d1d5db;

    /* 选中状态 */
    &--checked {
      background-color: #2b5cab;
      border-color: #2b5cab;
    }
  }
}

/* 其他通用样式 */
.text {
  font-size: 14px;
  font-family: $font-default;
  color: $color-default;
}

.item {
  margin-bottom: 18px;
  font-family: $font-default;
  color: $color-default;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: $font-default;
  color: $color-default;
}
</style>
